<template>
  <div class="live-analytics">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="data-card">
          <h3>总直播场次</h3>
          <div class="number">{{ totalLives }}</div>
          <div class="trend">
            较上月
            <span :class="liveGrowth >= 0 ? 'up' : 'down'">
              {{ Math.abs(liveGrowth) }}%
              <el-icon>
                <ArrowUp v-if="liveGrowth >= 0" />
                <ArrowDown v-else />
              </el-icon>
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <h3>本月直播场次</h3>
          <div class="number">{{ monthlyLives }}</div>
          <div class="trend">
            较上月
            <span :class="monthlyGrowth >= 0 ? 'up' : 'down'">
              {{ Math.abs(monthlyGrowth) }}%
              <el-icon>
                <ArrowUp v-if="monthlyGrowth >= 0" />
                <ArrowDown v-else />
              </el-icon>
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <h3>累计观看人次</h3>
          <div class="number">{{ totalViewers }}</div>
          <div class="trend">
            较上月
            <span :class="viewersGrowth >= 0 ? 'up' : 'down'">
              {{ Math.abs(viewersGrowth) }}%
              <el-icon>
                <ArrowUp v-if="viewersGrowth >= 0" />
                <ArrowDown v-else />
              </el-icon>
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="data-card">
          <h3>平均观看时长</h3>
          <div class="number">{{ avgWatchTime }}分钟</div>
          <div class="trend">
            较上月
            <span :class="watchTimeGrowth >= 0 ? 'up' : 'down'">
              {{ Math.abs(watchTimeGrowth) }}%
              <el-icon>
                <ArrowUp v-if="watchTimeGrowth >= 0" />
                <ArrowDown v-else />
              </el-icon>
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-4">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>直播趋势分析</span>
              <el-select v-model="timeRange" size="small">
                <el-option label="最近7天" value="7days" />
                <el-option label="最近30天" value="30days" />
                <el-option label="最近90天" value="90days" />
              </el-select>
            </div>
          </template>
          <div ref="trendChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>直播分类占比</span>
            </div>
          </template>
          <div ref="categoryChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'

// 数据统计
const totalLives = ref(1580)
const liveGrowth = ref(15.8)
const monthlyLives = ref(256)
const monthlyGrowth = ref(-5.2)
const totalViewers = ref(25890)
const viewersGrowth = ref(12.5)
const avgWatchTime = ref(45)
const watchTimeGrowth = ref(8.6)
const timeRange = ref('7days')

const trendChartRef = ref(null)
const categoryChartRef = ref(null)
let trendChart = null
let categoryChart = null

// 初始化趋势图表
const initTrendChart = () => {
  if (!trendChartRef.value) return
  
  trendChart = echarts.init(trendChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true
    }]
  }
  trendChart.setOption(option)
}

// 初始化分类占比图表
const initCategoryChart = () => {
  if (!categoryChartRef.value) return
  
  categoryChart = echarts.init(categoryChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 35, name: '健康讲座' },
        { value: 25, name: '运动健身' },
        { value: 20, name: '中医养生' },
        { value: 15, name: '营养饮食' },
        { value: 5, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  categoryChart.setOption(option)
}

// 监听时间范围变化
watch(timeRange, () => {
  // 更新趋势图表数据
  if (trendChart) {
    // 根据 timeRange 更新数据
    const data = {
      '7days': [150, 230, 224, 218, 135, 147, 260],
      '30days': Array.from({length: 30}, () => Math.floor(Math.random() * 200 + 100)),
      '90days': Array.from({length: 90}, () => Math.floor(Math.random() * 200 + 100))
    }
    trendChart.setOption({
      series: [{
        data: data[timeRange.value]
      }]
    })
  }
})

// 初始化图表
onMounted(() => {
  initTrendChart()
  initCategoryChart()
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    trendChart?.resize()
    categoryChart?.resize()
  })
})

// 组件卸载时销毁图表
onUnmounted(() => {
  trendChart?.dispose()
  categoryChart?.dispose()
  window.removeEventListener('resize', () => {
    trendChart?.resize()
    categoryChart?.resize()
  })
})
</script>

<style scoped>
.live-analytics {
  padding: 20px;
}

.data-card {
  text-align: center;
  padding: 20px;
}

.number {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}

.trend {
  color: #666;
  font-size: 14px;
}

.up { color: #67C23A; }
.down { color: #F56C6C; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mt-4 {
  margin-top: 16px;
}
</style> 